<template>
  <div class="carrier-page">
    <!-- 查询区 -->
    <el-form :inline="true" :model="searchForm" class="search-form">
      <el-form-item label="承运商编号">
        <el-input v-model="searchForm.CarrierCode" placeholder="请输入承运商编号" />
      </el-form-item>
      <el-form-item label="承运商名称">
        <el-input v-model="searchForm.CarrierName" placeholder="请输入承运商名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getData()">查询</el-button>
        <el-button @click="cz">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮区 -->
    <div class="action-buttons" style="margin: 10px 0;">
      <el-button type="primary" @click="dialogTableVisible=true">新建</el-button>
      <!-- <el-button @click="fetchData">刷新</el-button>
      <el-button @click="onExport">导出</el-button> -->
    </div>

    <!-- 数据表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="onSelectionChange"
    >
      <el-table-column type="selection" width="40" />
      <el-table-column prop="carrierCode" label="承运商编号" width="120" />
      <el-table-column prop="carrierName" label="承运商名称" width="180" />
      <el-table-column prop="carrierRemark" label="备注" />
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <!-- <el-button type="text" size="small" @click="onEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="onDelete([scope.row])">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
        <el-dialog v-model="dialogTableVisible" title="添加" width="800">
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" label-width="auto">
        <el-form-item label="仓库编号" prop="carrierCode">
          <el-input v-model="ruleForm.carrierCode" />
        </el-form-item>
        <el-form-item label="仓库名称" prop="carrierName">
          <el-input v-model="ruleForm.carrierName" />
        </el-form-item>
        <el-form-item label="面积" prop="carrierRemark">
          <el-input v-model="ruleForm.carrierRemark" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            添加
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'

const searchForm = ref({
  CarrierCode: '',
  CarrierName: '',
  index:1,
  size:15,
  totalCount:0,
  totalPCount:0,
})
onMounted(()=>{
  getData();
})
const tableData = ref([])
const getData=()=>{
  http.get("/basicread/api/Carrier/GetCarrier",{params:searchForm.value}).then(res=>{
    tableData.value=res.data.data
    searchForm.value.totalCount=res.data.totalCount
    searchForm.value.totalPCount=res.data.totalPCount
  })
}
const selectedRows = ref([])
function onSelectionChange(val: any) {
  selectedRows.value = val
}
//重置
const cz=()=>{
  getData();
}
const dialogTableVisible=ref(false)
import { reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import http from '@/http/axiosHelper'
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
   "carrierCode": "",
  "carrierName": "",
  "carrierRemark": ""
})
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      http.post("/basicwrite/api/Carrier/AddCarrier",ruleForm).then(res=>{
        if(res.data.code==200)
      {
        ElMessage.success(res.data.msg);
        dialogTableVisible.value=false;
        ruleForm.carrierCode='',
        ruleForm.carrierName='',
        ruleForm.carrierRemark='',
        getData();
      }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))


</script>

<style scoped>
.carrier-page {
  padding: 20px;
  background: #fff;
}
.search-form {
  margin-bottom: 10px;
}
</style>
